import { dayjs } from 'element-plus';
import userStore from '@/store/modules/user';
import {
  DATE_CUTS,
  FORMAT_DATE,
  APPLY_STATUS_LIST,
  INIT_SEARCH_TIME,
  GET_USER_IDS,
  APPLY_CONTENT_FORM
} from '@/utils/const';
import { getDeepInfo } from '@/utils';
const APPLY_STATUS_OBJ = {};
APPLY_STATUS_LIST.forEach(item => (APPLY_STATUS_OBJ[item.value] = item.label));

// 注入组件内数据
const componentData = ref({});
export const injectData = obj => {
  componentData.value = { ...componentData.value, ...obj };
};

// 查询表单
export const searchParams = reactive({
  sqlx_map: '-1',
  applyRange: DATE_CUTS.LAST_31_DAYS(),
  status: APPLY_STATUS_LIST[0].value
});

watch(
  () => searchParams.applyRange,
  val => {
    INIT_SEARCH_TIME(searchParams, val, 'begin_at', 'end_at');
  },
  { immediate: true }
);

// 查询条件
const startApplyTime = ref(undefined);
export const formItems = reactive({
  sqlx_map: {
    component: 'cascader',
    label: '申请类型',
    clearable: false,
    showAllLevels: false,
    showOnly: true,
    props: { emitPath: false, label: 'name', value: 'id', children: 'childs' },
    options: [],
    change(val) {
      if (!val || val === '-1') {
        searchParams.application_type = undefined;
      } else {
        const info = getDeepInfo({
          list: formItems.sqlx_map.options,
          key: val
        });
        searchParams.application_type = {
          id: val,
          name: info?.name,
          code: info?.code
        };
      }
      searchParams.domain = undefined;
      searchParams.fb_account_type = undefined;
      searchParams.fb_advertisement_account_type = undefined;
      searchParams.fb_advertisement_account = undefined;
    }
  },
  ...APPLY_CONTENT_FORM({ searchParams, code: 'application_type' }),
  apply_user_name: {
    component: 'input',
    label: '申请人',
    placeholder: '请输入申请人',
    maxlength: 100,
    showOnly: true,
    input() {
      searchParams.apply_user_ids = GET_USER_IDS(searchParams.apply_user_name);
    }
  },
  applyRange: {
    component: 'date-picker',
    type: 'daterange',
    label: '申请时间',
    clearable: true,
    showOnly: true,
    shortcuts: [
      { text: '最近7天', value: () => DATE_CUTS.LAST_7_DAYS() },
      { text: '本周', value: () => DATE_CUTS.THIS_WEEK() },
      { text: '本月', value: () => DATE_CUTS.THIS_MONTH() },
      { text: '上周', value: () => DATE_CUTS.PREV_WEEK() },
      { text: '上月', value: () => DATE_CUTS.PREV_MONTH() },
      { text: '最近31天', value: () => DATE_CUTS.LAST_31_DAYS() },
      { text: '最近180天', value: () => DATE_CUTS.LAST_180_DAYS() }
    ],
    disabledDate(ev) {
      if (!startApplyTime.value) return false;
      return (
        dayjs(ev).isAfter(dayjs(startApplyTime.value).add(179, 'day')) ||
        dayjs(ev).isBefore(dayjs(startApplyTime.value).subtract(179, 'day'))
      );
    },
    calendarChange(ev) {
      if (ev?.length && ev[0] && !ev[1]) startApplyTime.value = ev[0];
      else startApplyTime.value = undefined;
    }
  }
});

// 表格字段
export const columns = ref([
  {
    prop: 'type.name',
    label: '申请类型',
    fixed: 'left'
  },
  { prop: 'content', label: '申请内容', fixed: 'left' },
  { prop: 'group.name', label: '所属团队' },
  {
    prop: 'status',
    label: '申请状态',
    format(data) {
      return APPLY_STATUS_OBJ[data];
    }
  },
  {
    prop: 'rejected_user_id',
    label: '驳回人',
    // 驳回tab显示
    hidden() {
      return componentData.value.activeTab !== 2;
    },
    format(data) {
      return userStore().userMap[data]?.label;
    }
  },
  {
    prop: 'rejected_time',
    label: '驳回时间',
    format(data) {
      return FORMAT_DATE(data);
    },
    // 驳回tab显示
    hidden() {
      return componentData.value.activeTab !== 2;
    }
  },
  {
    prop: 'accepted_user_id',
    label: '接收人',
    // 接收tab显示
    hidden() {
      return componentData.value.activeTab !== 3;
    },
    format(data) {
      return userStore().userMap[data]?.label;
    }
  },
  {
    prop: 'accepted_time',
    label: '接收时间',
    format(data) {
      return FORMAT_DATE(data);
    },
    // 接收tab显示
    hidden() {
      return componentData.value.activeTab !== 3;
    }
  },
  {
    prop: 'completed_user_id',
    label: '完成人',
    // 完成tab显示
    hidden() {
      return componentData.value.activeTab !== 4;
    },
    format(data) {
      return userStore().userMap[data]?.label;
    }
  },
  {
    prop: 'completed_time',
    label: '完成时间',
    format(data) {
      return FORMAT_DATE(data);
    },
    // 完成tab显示
    hidden() {
      return componentData.value.activeTab !== 4;
    }
  },
  {
    prop: 'canceled_user_id',
    label: '取消人',
    // 取消tab显示
    hidden() {
      return componentData.value.activeTab !== 5;
    },
    format(data) {
      return userStore().userMap[data]?.label;
    }
  },
  {
    prop: 'canceled_time',
    label: '取消时间',
    format(data) {
      return FORMAT_DATE(data);
    },
    // 取消tab显示
    hidden() {
      return componentData.value.activeTab !== 5;
    }
  },
  {
    prop: 'applied_user_id',
    label: '申请人',
    format(data) {
      return userStore().userMap[data]?.label;
    }
  },
  {
    prop: 'applied_time',
    label: '申请时间',
    format(data) {
      return FORMAT_DATE(data);
    }
  },
  {
    label: '操作',
    width: '100px',
    fixed: 'right',
    buttons: [
      {
        label: '详情',
        click({ row }) {
          componentData.value.handleDetail(row);
        }
      }
    ]
  }
]);
